<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])

const initEcharts = ((item) => {

  const value = props.tableData;
  const color = new echarts.graphic.LinearGradient(
      0, 0, 1, 0,
      [{
        offset: 0,
        color: 'rgba(88, 217, 249,.2)',
      },
        {
          offset: 1,
          color: 'rgba(73, 146, 255,.8)',

        }
      ]
  );
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      backgroundColor: '#fff',
      series: [{
        center: ['50%', '50%'],
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        radius: '100%',
        axisLine: {
          show: true,
          lineStyle: {
            color: [
              [1, '#999']
            ],
            width: 1,
            opacity: 1
          }
        },
        title: {
          show: false
        },
        detail: {
          offsetCenter: [0, '40%'],
          formatter: '{value}%',
        },
        axisTick: {
          length: 10,
          lineStyle: {
            color: '#999'
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: '#999',
            width: 3
          }
        },
        axisLabel: {
          color: '#999'
        },
        pointer: {
          width: 10,
          length: '80%'
        },
        itemStyle: {
          color: color,
          shadowColor: '#58D9F9',
          shadowBlur: 10,
          shadowOffsetX: 2,
          shadowOffsetY: 2
        },
        markPoint: {
          data: [{
            x: "50%",
            y: "50%",
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: "#fff"
            },
          }]
        },
        data: [{
          value: value,
        },]
      },
        {
          center: ['50%', '50%'],
          type: 'gauge',
          radius: '70%',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          title: {
            show: false
          },
          detail: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 16,
              color: [
                [
                  value / 100, color
                ],
                [
                  1, 'rgba(0,0,0,.05)'
                ]
              ],
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false
          },
          pointer: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: '#54F200',
            }
          },
        }
      ]

    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})

watch(() => props.tableData, (newValue, oldValue) => {
  initEcharts(newValue)
}, {immediate: true, deep: true})

onMounted(() => {
  console.log('rops.tableData', props.tableData)
  initEcharts(props.tableData)
})
</script>

<style lang="less" scoped>
</style>
